<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/radio/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicRadios">
			<div class="m-section">
				<span class="m-section__sub">
					<code>mat-radio</code> provides the same functionality as a native
					<code>&lt;input type="radio"&gt;</code> enhanced with Material Design styling and animations.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-radio-group>
						<mat-radio-button  value="Alabama">Alabama</mat-radio-button>
						<mat-radio-button  value="Alaska">Alaska</mat-radio-button>
						<mat-radio-button  value="Florida">Florida</mat-radio-button>
						<mat-radio-button  value="Illinois">Illinois</mat-radio-button>
						<mat-radio-button  value="Kansas">Kansas</mat-radio-button>
					</mat-radio-group>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDisabledRadios">
			<div class="m-section">
				<span class="m-section__sub">
					<code>@Input() disabled: boolean</code> Whether the radio group is disabled
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-radio-group disabled="true">
						<mat-radio-button  value="Alabama">Alabama</mat-radio-button>
						<mat-radio-button  value="Alaska">Alaska</mat-radio-button>
						<mat-radio-button  value="Florida">Florida</mat-radio-button>
						<mat-radio-button  value="Illinois">Illinois</mat-radio-button>
						<mat-radio-button  value="Kansas">Kansas</mat-radio-button>
					</mat-radio-group>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exmapleLabelPosition">
			<div class="m-section">
				<span class="m-section__sub">
					<code>@Input() labelPosition: 'before' | 'after'</code> Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-radio-group [labelPosition]="labelPosition">
						<mat-radio-button  value="Alabama">Alabama</mat-radio-button>
						<mat-radio-button  value="Alaska">Alaska</mat-radio-button>
						<mat-radio-button  value="Florida">Florida</mat-radio-button>
						<mat-radio-button  value="Illinois">Illinois</mat-radio-button>
						<mat-radio-button  value="Kansas">Kansas</mat-radio-button>
					</mat-radio-group>
					<div class="m-separator m-separator--dashed"></div>
					<mat-slide-toggle (change)="changeLablesPositions()">Slide labels position</mat-slide-toggle>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleRadiosWithNgModel">
			<div class="m-section">
				<div class="example-container">
					<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
						<mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
							{{season}}
						</mat-radio-button>
					</mat-radio-group>
					<div class="m-separator m-separator--dashed"></div>
					<div class="example-selected-value">Your favorite season is: <mark *ngIf="favoriteSeason">{{favoriteSeason}}</mark></div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleChangeEvent">
			<div class="m-section">
				<span class="m-section__sub">
					<code>@Output() change: EventEmitter&lt;MatRadioChange&gt;</code> 
						Event emitted when the group value changes. Change events are only emitted when the value changes due to user interaction with a radio button (the same behavior as 
						<code>&lt;input type-"radio"&gt;</code>).
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-radio-group (change)="changeState()" [(ngModel)]="selectedState">
						<mat-radio-button  value="Alabama">Alabama</mat-radio-button>
						<mat-radio-button  value="Alaska">Alaska</mat-radio-button>
						<mat-radio-button  value="Florida">Florida</mat-radio-button>
						<mat-radio-button  value="Illinois">Illinois</mat-radio-button>
						<mat-radio-button  value="Kansas">Kansas</mat-radio-button>
					</mat-radio-group>
					<div class="m-separator m-separator--dashed" *ngIf="state"></div>
					<span *ngIf="state">Welcome to <mark>{{ state }}</mark>!</span>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>